<template>
<!-- 首页 师资团队单页 -->
  <div class="team">
    <!--面包屑导航-->
    <el-row class="tagStyle">
      <el-col :span="18" :offset="3">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>师资团队</el-breadcrumb-item>
          </el-breadcrumb>
      </el-col>
    </el-row>
    <!--内容-->
   <el-row style="margin-top: 20px;">
     <el-col :span="22" :offset="1">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span class="cardTitle">师资团队</span>
         </div>
           <!--all teacher-->
           <el-row>
             <el-col :span="4" v-for="item in teachers" :key="item.xh" :offset="item.xh >1 ? 2 : 1">
               <el-card :body-style="{ padding: '0px' }" style="margin-top: 5px;">
                 <img style="margin-left: 10%;border-radius: 15px;" v-bind:src="[baseUrl+'/'+item.img]">
                 <div style="padding: 14px;">
                   <span style="font-weight: bolder">{{item.name}}</span>
                   <el-rate
                     v-model=item.score
                     disabled
                     score-template="{value}">
                   </el-rate>
                   <div class="bottom clearfix">
                     <el-tooltip placement="top">
                       <div slot="content">{{item.name}}<br/>星级:{{item.score}}</div>
                       <el-button type="text" class="button" @click="noticeCoach(item)">查看详情</el-button>
                     </el-tooltip>
                   </div>
                 </div>
               </el-card>
             </el-col>
           </el-row>
         <el-row style="margin-top: 20px;font-size: 20px;">
           <el-col :span="6" :offset="16">
             <el-pagination
               @current-change="pageCurrentChange"
               :current-page="currentPage"
               layout="total, prev, pager, next, jumper"
               :total="this.teachers.length">
             </el-pagination>
           </el-col>
         </el-row>
       </el-card>
     </el-col>
   </el-row>
  </div>
</template>

<script>
  import request from '@/api/request';
  import * as  constant from '@/Constant/constant'
export default {
  name: "team",

  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      isrouter:false,
      teachers:[],
      currentPage:1,
      baseUrl:constant.BASE_URL
    };
  },
mounted:function(){
  this.getAllTeachers();
},
  methods: {
    //查看教练详情
    noticeCoach(item){
      this.$router.push(
        {
          name:'singleTeacher',
          params: {
              item:item
          }
        }
        );
    },
    getAllTeachers(){
      request.getAllTeacherInfo().then((data)=>{
        if(data){//代表查询成功
          this.teachers=data.data;
        }else{
          this.$message({
            message: '请求失败',
            type: 'warning'
          });
        }
      });
    },
    //当前页变化
    pageCurrentChange(){

    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tagStyle{
    font-size: 34px;
    font-weight: bold;
}
  .team{
    margin-top: 20px;
  }
.cardTitle{
  font-size: 26px;
  font-weight: bold;
}
</style>
